<template>
  <ul>
    <li v-for="(item, index) in arr" :key="index">
      <div @click="jumpSearchList(item)">
        <span class="icon"></span>
        <p>{{ item }}</p>
      </div>
      <span class="del" @click="del(index)">X</span>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      arr: [],
    };
  },
  created() {
    if (window.localStorage.getItem("historyArr")) {
      this.arr = [...new Set(this.historyArr = window.localStorage
        .getItem("historyArr")
        .split(","))];
    }
  },
  methods:{
    del(index){
      this.arr.splice(index,1)
      window.localStorage.setItem('historyArr',this.arr)
    },
    jumpSearchList(word) {
      this.$router.push({
        path: "/searchlist",
        query: {
          word,
        },
      });
    },
  }
};
</script>

<style lang="less" scoped>
li {
  display: flex;
  align-items: center;
  width: 95vw;
  margin: 1vh auto;
  justify-content: space-between;
  border-bottom: 1px solid #f1f2f3;
  padding: 10px 0;
  margin-top: 5px;
  div{
      display: flex;
      align-items: center;
      flex:1;
      p{
          font-size: 14px;
      }
  }
}
.icon {
  display: block;
  width: 15px;
  height: 15px;
  background-image: url();
  margin-right: 10px;
}
.del {
  display: block;
  width: 14px;
  height: 14px;
  opacity:0.6;
}
</style>